<template>
  <div>
    <form action="#" id="searchForm">
      订单编号：<input type="text" placeholder="请输入客户编码" v-model="customerId" v-on:change="searchId()">
      客户名称：<input type="text" placeholder="请输入客户名称" v-model="customerName" v-on:change="searchName()"><br/>
      下单时间：<input type="date" v-model="date1" v-on:change="searchTime()">
      审核状态：<select name="" id="" v-model="status" v-on:change="searchPro()" >
      <option v-for="item in options" :key="item.id" :value="item.id">{{item.statusName}}</option>
    </select>
    </form>
    <div>
      <el-table
        :data="orderData"
        :header-cell-style="headerStyle"
        :cell-style="isCenter"
        style="width: 90%;margin: 0 auto;">
        <el-table-column
          prop="orderNo"
          label="订单号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="orderTime"
          label="下单时间"
          width="100">
        </el-table-column>
        <el-table-column
          prop="companyName"
          label="客户名称"
          width="100">
        </el-table-column>
        <el-table-column
          prop="null1"
          label="产品名称"
          width="100">
          <template slot-scope="{row: {null1}}">
            <span  v-html="null1"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="null2"
          label="产品单价"
          width="80">
          <template slot-scope="{row: {null2}}">
            <span  v-html="null2"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="null3"
          label="产品数量"
          width="80">
          <template slot-scope="{row: {null3}}">
            <span  v-html="null3"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="null4"
          label="金额"
          width="80">
          <template slot-scope="{row: {null4}}">
            <span  v-html="null4"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="checkStatus"
          label="审核状态"
          width="100">
        </el-table-column>
        <el-table-column
          prop="dealStatus"
          label="交易状态"
          width="100">
        </el-table-column>
        <el-table-column
          prop="addressInfo"
          label="地址"
          width="200">
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="1"
        layout="total, sizes, prev, pager, next, jumper"
        :total="zpage">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'orderDetails',
  data () {
    return {
      customerId: '',
      customerName: '',
      options: [{ id: 1, statusName: '未审核' }, { id: 2, statusName: '已审核' }],
      status: '',
      date1: '',
      date2: '',
      orderData: [],
      form: {
        productName: '',
        categoryName: '',
        scfcName: '',
        productRepertory: '',
        policy: ''
      },
      currentPage: 10,
      page: 1,
      zpage: 5,
      test1: ''
    }
  },
  created: function () {
    this.$axios.post('order/queryAllOrder',
      { page: this.page, limit: this.currentPage }, { headers: { 'Content-Type': 'application/json' } })
      .then((response) => {
        window.console.log(response.data.data)
        this.orderData = response.data.data
        this.zpage = Math.ceil(response.data.data.length)
        this.zhuli()
      }).catch(function (error) {
        window.console.log(error)
      })
  },
  methods: {
    zhuli: function () {
      for (var i = 0; i < this.orderData.length; i++) {
        // 地址
        this.orderData[i].addressInfo = this.orderData[i].province + this.orderData[i].city + this.orderData[i].county + this.orderData[i].street + this.orderData[i].addressInfo
        // 时间
        this.orderData[i].orderTime = this.formatDate(new Date(this.orderData[i].orderTime))
        for (var j = 0; j < this.orderData[i].productInfo.length; j++) {
          // window.console.log(this.orderData[i].productInfo[j].productId);
          this.orderData[i].null1 += this.orderData[i].productInfo[j].productName + '<br>'
          this.orderData[i].null2 += this.orderData[i].productInfo[j].productPrice + '<br>'
          this.orderData[i].null3 += this.orderData[i].productInfo[j].productNum + '<br>'
          this.orderData[i].null4 += this.orderData[i].productInfo[j].payMoney + '<br>'
        }
      }
    },
    headerStyle () {
      return 'text-align:center'
    },
    isCenter () {
      return 'text-align:center'
    },
    searchId: function () {
      window.console.log(this.customerId)
      this.$axios.post('order/orderSearchByNoAll',
        { page: this.page, limit: this.currentPage, orderNo: this.customerId }, { headers: { 'Content-Type': 'application/json' } })
        .then((response) => {
        // window.console.log(response);
          this.orderData = response.data.data
          this.zpage = Math.ceil(response.data.data.length)
          this.zhuli()
        }).catch(function (error) {
          window.console.log(error)
        })
    },
    searchName: function () {
      window.console.log(this.customerName)
      this.$axios.post('order/orderSearchByDealerNameAll',
        { page: this.page, limit: this.currentPage, companyName: this.customerName }, { headers: { 'Content-Type': 'application/json' } })
        .then((response) => {
        // window.console.log(response);
          this.orderData = response.data.data
          this.zpage = Math.ceil(response.data.data.length)
          this.zhuli()
        }).catch(function (error) {
          window.console.log(error)
        })
    },
    searchTime: function () {
      window.console.log(typeof this.date1)
      this.$axios.post('order/orderSearchByTimeAll',
        { page: this.page, limit: this.currentPage, orderTime: this.date1 }, { headers: { 'Content-Type': 'application/json' } })
        .then((response) => {
        // window.console.log(response);
          this.orderData = response.data.data
          this.zpage = Math.ceil(response.data.data.length)
          this.zhuli()
        }).catch(function (error) {
          window.console.log(error)
        })
    },
    handleSizeChange (newsize) {
      // window.console.log(newsize);
      this.currentPage = newsize
      this.$axios.post('order/queryAllOrder',
        { page: this.page, limit: this.currentPage }, { headers: { 'Content-Type': 'application/json' } })
        .then(function (res) {
          this.orderData = res.data.data
          this.zpage = Math.ceil(res.data.count)
          this.zhuli()
        })
    },
    handleCurrentChange (newpage) {
      window.console.log('newpage' + newpage)
      this.page = newpage
      window.console.log('this.page' + this.page)
      this.$axios.post('order/queryAllOrder', { page: this.page, limit: this.currentPage }, { headers: { 'Content-Type': 'application/json' } }).then(function (res) {
        // window.console.log(res);
        this.orderData = res.data.data
        this.zpage = Math.ceil(res.data.count)
        this.zhuli()
      })
    }
  }
}
</script>

<style scoped>
#del{
  text-decoration-line: underline;
  color: blue;
  font-size: 13px;
}
.el-table-column{
  text-align: center;
  border: 1px solid red
}
#searchForm{
  width: 90%;
  text-align: left;
  margin: 0 auto;
}
#searchForm input{
  width: 150px;
  height: 25px;
}
#searchForm input[type=text] {margin-bottom: 20px }
#searchForm input[type=date]::-webkit-inner-spin-button { visibility: hidden; }
#searchForm input{
  margin-right: 12px;
}
#searchForm select{
  width: 152px;
  height: 29px;
}
#searchForm .el-button{
  margin-left: 50px;
}
i{
  padding: 16px
}
.block{
  width: 90%;
  margin: 15px auto;
  text-align: left;
}
</style>
